import {
    createCustomComponent
} from 'vue-amap';
export const DistrictExplorer = createCustomComponent({
    name: 'district-explorer',
    contextReady() {},
    data: () => {
        return {
            _districtExplorer: null, //行政区划实例
            _map: null, //地图实例
            currentAreaNode: null, //当前选中区划
            initstatus:0
        };
    },
    props: ['center', 'zoom','events'],
    init(options) {
        this._map = this.$amap;
        return new Promise((resolve, reject) => {
            AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
                //创建一个实例
                this._districtExplorer = new DistrictExplorer({
                    map: this._map, //关联的地图实例
                    eventSupport: true, //事件支持
                    preload: [100000]
                });
                //行正区绘制
                this.load_area_node();
                this.district_event();
                resolve(this._districtExplorer);
                //执行行政区划事件
            })
        })
    },
    methods: {
        //行正区划绘制(默认绘制全国)
        load_area_node(adcode = 100000) {
            this._districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
                if (error) {
                    console.error(error);
                    return;
                }
                //绘制载入的区划节点
                this.renderAreaNode(areaNode);
            });
        },
        //绘制载入的区划节点
        renderAreaNode(areaNode) {
            //更新地图视野
            if (areaNode.adcode > 100000) {
                this._map.setBounds(areaNode.getBounds());
            }
            //清除已有的绘制内容
            this._districtExplorer.clearFeaturePolygons();
            let colors = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00"];
            //绘制子级区划
            this._districtExplorer.renderSubFeatures(areaNode, (feature, i) => {
                let fillColor = colors[i % colors.length];
                let strokeColor = colors[colors.length - 1 - i % colors.length];
                return {
                    cursor: 'default',
                    bubble: false,
                    strokeColor: strokeColor, //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 1, //线宽
                    fillColor: fillColor, //填充色
                    fillOpacity: 0.1, //填充透明度
                };
            });

            //绘制父级区划，仅用黑色描边
            this._districtExplorer.renderParentFeature(areaNode, {
                cursor: 'pointer',
                bubble: true,
                strokeColor: 'black', //线颜色
                fillColor: null,
                strokeWeight: 1, //线宽
            })
            this.currentAreaNode = areaNode;
            if(this.initstatus==0){
                this.$emit('districtExplorerLoad');
                this.initstatus++;
            }
            // 更新地图视野以适合区划面
        },
        //行政区划事件
        district_event() {
            let textMark = new AMap.Text({
                anchor: 'bottom-left',
                map: this._map,
                visible: false,
                bubble: true,
                text: '文本标记',
                style: {},
            });
            //鼠标移入移出
            this._districtExplorer.on('featureMouseout featureMouseover', (e, feature) => {
                // debugger;
                let isHover = e.type === 'featureMouseover';
                //更改选中区域透明度
                let polys = this._districtExplorer.findFeaturePolygonsByAdcode(feature.properties.adcode);
                for (let item of polys) {
                    item.setOptions({
                        fillOpacity: isHover ? 0.5 : 0.1
                    })
                }

                if (!isHover) {
                    textMark.hide();
                    return;
                }
                textMark.show();
            });
            //鼠标移动
            this._districtExplorer.on('featureMousemove', (e, feature) => {
                textMark.setText(feature.properties.name);
                textMark.setPosition(e.originalEvent.lnglat);
            })
            //鼠标点击
            this._districtExplorer.on('featureClick', (e, feature) => {
                let adcode = feature.properties.adcode;
                if (this.currentAreaNode && this.currentAreaNode.adcode == adcode) return;
                //行正区绘制
                this.load_area_node(adcode);
                this.$emit('featureChange', adcode);
            });
            //外部区域被点击
            this._districtExplorer.on('outsideClick', (e, feature) => {
                // console.log(feature);
                this._districtExplorer.locatePosition(e.originalEvent.lnglat, (error, routeFeatures) => {
                    this.reload_district();
                }, {
                    levelLimit: 2
                });
            });
        },
        reload_district() {
            //切换到全国
            this._map.clearInfoWindow();
            this.$emit('clearData');
            this.currentAreaNode = null;
            this.load_area_node();
            this._map.setZoomAndCenter(this.zoom, this.center);
        }
    }
});
